<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>猫抓 M3U8解析器</title>
    <link rel="stylesheet" type="text/css" href="css/options.css" media="all" />
    <script src="js/jquery.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/firefox.js"></script>
    <script src="js/m3u8.js"></script>
    <script src="js/mux.min.js"></script>
  </head>

  <body>
    <div class="m3u8_wrapper">

      <section id="loading">
        <div class="optionBox">
          文件载入中...
        </div>
      </section>

      <section id="more_m3u8" class="hide">
        <h1 class="optionsTitle">下一级文件</h1>
        <span class="explain">该m3u8文件中嵌套多个m3u8文件</span>
        <div class="optionBox">
          <div id="next_m3u8"></div>
        </div>
      </section>
      <section id="more_audio" class="hide">
        <h1 class="optionsTitle">多个音频</h1>
        <span class="explain">该m3u8文件中嵌套多个音频</span>
        <div class="optionBox">
          <div id="next_audio"></div>
        </div>
      </section>
      <section id="more_subtitle" class="hide">
        <h1 class="optionsTitle">多个字幕</h1>
        <span class="explain">该m3u8文件中嵌套多个字幕</span>
        <div class="optionBox">
          <div id="next_subtitle"></div>
        </div>
      </section>

      <section id="m3u8" class="hide">
        <h1 class="optionsTitle">猫抓 m3u8解析器</h1>
        <span class="explain" id="key"></span>
        <div class="optionBox">
          <div class="block">
            m3u8文件地址
            <p><a id="m3u8_url"></a></p>
          </div>
          
          <div class="block" id="tips"></div>

          <p id="count"></p>
          <div class="block" id="textarea">
            <!-- <div id="media_file" contenteditable="true"></div> -->
            <textarea rows="50" cols="160" id="media_file" spellcheck="false"></textarea>
            <video id="video" class="hide" width="100%" controls></video>
          </div>

          <div class="block" id="button">
            <button id="downText">下载显示内容</button>
            <button id="originalM3U8">原始m3u8</button>
            <button id="localFile">本地m3u8</button>
            <button id="getTs">提取ts</button>
            <button id="play" data-switch="on">播放m3u8</button>
            <button id="catch" data-switch="on">开启捕获</button>
            <button id="m3u8DL" class="button2">调用N_m3u8DL-CLI下载</button>
            <div class="merge customKey">
              <input type="text" id="customKey" spellcheck="false" placeholder="自定义密钥 base64" size="64"/>
              <input type="text" id="customIV" spellcheck="false" placeholder="自定义iv" size="64"/>
            </div>
            <div class="merge">
              <div id="threadDiv" class="themeColor">下载线程数 <input type="number" value="32" id="thread" spellcheck="false" style="width: 35px;" step="1" min="1" max="128"/></div>
              <div class="mp4div themeColor">转换mp4格式<input type="checkbox" id="mp4"></div>
              <div class="skipDecryptDiv themeColor">跳过解密<input type="checkbox" id="skipDecrypt"></div>
              <div class="rangeDown themeColor">
                下载范围
                <div class="merge">
                  <input type="number" id="rangeStart" spellcheck="false" placeholder="开始" step="1" min="1"/>
                  <input type="number" id="rangeEnd" spellcheck="false" placeholder="结束" step="1" min="1"/>
                </div>
              </div>
              <button id="mergeTs" class="button2">合并下载</button>
              <button class="openDir button2">打开下载目录</button>
              <button id="ForceDownload" class="hide" class="button2">强制下载已有数据</button>
            </div>
            <div style="display: flex; margin-top: 10px;"><div id="progress"></div> <div id="fileSize"></div></div>
            <div class="block hide" id="errorTsList"></div>
          </div>

        </div>
      </div>
      </section>
    </div>
    <script src="js/m3u8-decrypt.js"></script>
    <script src="js/hls.min.js"></script>
    <script src="js/base64.js"></script>
  </body>
</html>
